import { Button, Checkbox, Form, Input } from 'antd';
import { connect } from 'dva';
import { history } from 'umi';
import NewLogo from '../../assets/images/newLogo2.png';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import styles from './index.less';

function LoginPage(props: any) {
    const { dispatch, loading = false } = props;

    const onFinish = (values: any) => {
        dispatch({
            type: 'login/login',
            payload: {
                ...values,
            },
        });
    };

    return (
        <div className={styles.loginContainer}>
            <div className={styles.loginContent}>
                <div className={styles.leftPanel}>
                    <div className={styles.circle1} />
                    <div className={styles.circle2} />
                    <div className={styles.content}>
                        <h1>升级文件管理系统</h1>
                        <p>专业的文件管理解决方案</p>
                        <div className={styles.features}>
                            <div className={styles.featureItem}>
                                <div className={styles.featureIcon}>📁</div>
                                <h3>智能管理</h3>
                                <p>高效的文件分类与管理</p>
                            </div>
                            <div className={styles.featureItem}>
                                <div className={`${styles.featureIcon} ${styles.chargingIcon}`}>⚡</div>
                                <h3>快速处理</h3>
                                <p>极速的文件处理能力</p>
                            </div>
                            <div className={styles.featureItem}>
                                <div className={styles.featureIcon}>🔒</div>
                                <h3>安全可靠</h3>
                                <p>严格的安全防护机制</p>
                            </div>
                        </div>
                    </div>
                    <div className={styles.chargingStation}>
                        <div className={styles.stationBody} />
                        <div className={styles.energyFlow}>
                            <div className={styles.energyParticle} />
                            <div className={styles.energyParticle} />
                            <div className={styles.energyParticle} />
                        </div>
                    </div>
                </div>
                <div className={styles.rightPanel}>
                    <div className={styles.loginCard}>
                        <div className={styles.header}>
                            <img src={NewLogo} alt="logo" className={styles.logo} />
                            <h2>账号登录</h2>
                            <p>欢迎回来，请输入您的账号信息</p>
                        </div>
                        <Form
                            name="login"
                            onFinish={onFinish}
                            initialValues={{ remember: true }}
                            className={styles.loginForm}
                        >
                            <Form.Item
                                name="username"
                                rules={[{ required: true, message: '请输入用户名!' }]}
                            >
                                <Input
                                    prefix={<UserOutlined />}
                                    placeholder="请输入用户名/手机号"
                                    size="large"
                                />
                            </Form.Item>
                            <Form.Item
                                name="password"
                                rules={[{ required: true, message: '请输入密码!' }]}
                            >
                                <Input.Password
                                    prefix={<LockOutlined />}
                                    placeholder="请输入密码"
                                    size="large"
                                />
                            </Form.Item>
                            <Form.Item>
                                <div className={styles.formBottom}>
                                    <Checkbox>记住我</Checkbox>
                                    <Button type="link" className={styles.forgotBtn}>
                                        忘记密码?
                                    </Button>
                                </div>
                            </Form.Item>
                            <Form.Item>
                                <Button
                                    type="primary"
                                    htmlType="submit"
                                    loading={loading}
                                    block
                                    size="large"
                                    className={styles.loginButton}
                                >
                                    {loading ? '登录中...' : '登录'}
                                </Button>
                            </Form.Item>
                            <div className={styles.footer}>
                                <span>还没有账号?</span>
                                <Button
                                    type="link"
                                    onClick={() => history.push('/register')}
                                    className={styles.registerBtn}
                                >
                                    立即注册
                                </Button>
                            </div>
                        </Form>
                    </div>
                </div>
            </div>
        </div>
    );
}

function mapStateToProps({
    login = {},
    loading: {
        effects: {
            'login/login': loading = false
        } = {}
    } = {}
}) {
    return {
        ...login,
        loading
    };
}

export default connect(mapStateToProps)(LoginPage);
